var context = new webkitAudioContext();
var packBuff = [];

function start(){
	console.log('sers Fertig', packBuff.length);
	var audioBuffer = packBuff[0]//context.createBuffer( 2, 190*48000,  48000);
	
	var startTime = 0;

 	for (var ii = 1, audioChunk; audioChunk = packBuff[ii]; ++ii) {
		
		var chunkData = audioChunk.getChannelData(0);
		var startSlice = 0;
		var longSlice = chunkData.length;
		console.log(longSlice);
		for(var i=0; chunkData[i] === 0;i++){
			startSlice++;
		}
		longSlice -= startSlice;
		for(longSlice; chunkData[longSlice] === 0;longSlice--){
		}
		chunkData = chunkData.subarray(startSlice, longSlice)
		audioBuffer.getChannelData(0).set(chunkData, startTime);
		console.log('start:end',startTime, longSlice);
		startTime += longSlice;
	  
	}	 
	/* 
 	//69701 73157 
	var c = audioBuffer.getChannelData(0);
	var test = 530353;
	var count = 0;
	for(test; c[test] === 0;test--){
		count++;
	}
	console.log('count', count);
	console.log(c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++]);
	 */
	var source = context.createBufferSource();
	source.buffer = audioBuffer;
	
	source.connect(context.destination);
	
	//source.noteOn(0);
}

function onload(){

	var socket = new WebSocket('ws://192.168.0.204:8081/socket');
	socket.binaryType = 'arraybuffer'
	socket.onopen = function (w) {
		console.log('onopen');
	}; 
	var count = 0;
	var bcount = 0;
	socket.onmessage = function (e) {
		var data = e.data;
		if(data.byteLength){
			count++;
			console.log('bin recived');
  		 	context.decodeAudioData(data, function(audio) {
  		 		bcount++;
  		 		
 		 		packBuff.push(audio);
 		 		if(count == bcount)start();
			}, function(err ){console.log('cant decode',err);}); 
 		 	
		}else if(typeof data == 'string'){
			var data = $.evalJSON(data);
			switch (data.msg) {
			case 'getMediaStructur':
				console.log(data.body);
				break;
			case 'getMedia':
				console.log(data.body);
				break;
			case 'BLANK':

				break;
			}
		}
	};
	socket.onclose = function (e) {
		console.log('close', e);
	}; 
	$(document).get(0).addEventListener("drop", function(e){
		if(e.stopPropagation) e.stopPropagation();
		if(e.preventDefault) e.preventDefault();
        if(e.dataTransfer.files.length > 0){
        	var f = e.dataTransfer.files[0];
     		var reader = new FileReader();
			reader.onload = function(e){
	        	context.decodeAudioData(e.target.result, function(a){
	        		console.log('########################');
	        		var c = a.getChannelData(0);
	        		var test = 141869;
	        		var count = 0;
	        		for(test; c[test] === 0;test++){
	        			count++;
	        		}
	        		test = 141869;
	        		console.log('count', count);
	        		console.log(c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++],c[test++]);

	        	});
			};

        	reader.readAsArrayBuffer(f);
        }
    }, true);
	$('#getMedia .send').click(function(){
		socket.send( $.toJSON( {
			msg: 'getMedia',
			body: {
				url: $('#getMedia .url').val(),
				depth: $('#getMedia .depth').val(),
			}
		}) );
	});
	$('#getMediaStream .send').click(function(){
		socket.send( $.toJSON( {
			msg: 'getMediaStream',
			body: {
				url: $('#getMediaStream .url').val(),
				off: $('#getMediaStream .off').val(), 
			}
		}) );
	});
	$('#getMediaStructur .send').click(function(){
		socket.send($.toJSON({
			msg: 'getMediaStructur',
			body: {
				url: $('#getMediaStructur .url').val(),
				depth: $('#getMediaStructur .depth').val(),
			}
		})); 
	});

}